<template>
<el-container style="height:100%">
    <el-header style="background-color:teal;">
        <h2 style="color:white;display:inline;line-height:60px">汽修宝 - 平台管理</h2>{{$innerHeight}}
        
        <el-dropdown style="float:right;margin-right:50px" @command="getCommand">
            <el-button type="text" class="el-dropdown-link" style="color:white;height:60px;font-size:16px;font-weight:500;">
                <i class="el-icon-success"></i>
                {{admin.name}}
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">修改密码</el-dropdown-item>
                <el-dropdown-item divided command="b">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </el-header>
    <el-container style="height:100%">
        <el-aside width='180px' v-show='menuShow' style="height:100%">
            <el-menu router :unique-opened="true" active-text-color="teal" style="height:100%">
                <el-menu-item v-for="menu in menuList" :key='menu.menuUrl' v-bind:index="menu.menuUrl" >
                    <i class="el-icon-menu"></i> 
                    {{menu.name}}
                </el-menu-item>
                <el-menu-item @click="hiddenMenu" index="">
                    <i class="el-icon-d-arrow-left"></i>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-aside style="width:0px;margin-right:20px" v-show="!menuShow">
            <el-button v-show="!menuShow" style='width:25px;position:fixed;left:-20px;top:60px' icon="el-icon-d-arrow-right" @click="hiddenMenu"></el-button>
        </el-aside>

        <el-main style="padding:20px 20px 0px;overflow:auto;">
            <router-view />
        </el-main>
    
    </el-container>

    <el-dialog title="修改密码" :visible.sync="pwEditor.show" width="500px" center :close-on-click-modal="false">
        <el-form :model="pwEditor.form" :rules="pwEditor.rules" label-width="100px" style="width:400px" ref="pwEditorForm">
            <el-form-item label="原密码" prop="originPw">
                <el-input type="password" v-model="pwEditor.form.originPw" ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPw">
                <el-input type="password" v-model="pwEditor.form.newPw" ></el-input>
            </el-form-item>
            <el-form-item label="重复密码" prop="repeatPw">
                <el-input type="password" v-model="pwEditor.form.repeatPw" ></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="pwEditor.show = false" size="small">取 消</el-button>
            <el-button type="primary" @click="pwEditor.toSubmit()" size="small">确 定</el-button>
        </span>
    </el-dialog>

</el-container>

</template>

<script>
export default {
  data(){
    var validatorRepeatPw=(rule, value, callback)=>{
        if(this.pwEditor.form.newPw==value){
            callback();
        }else{
            callback(new Error('新密码不一致'));
        }
    };
    return {
        activeIndex:"/index",
        menuShow:true,
        admin:{},
        menuList:[
            {
                menuUrl:"",
                name:'',
                functions:''
            }
        ],
        pwEditor:{
            show:false,
            form:{
                originPw:"",
                newPw:"",
                repeatPw:""
            },
            rules:{
                originPw: [
                    { required: true, message: '原密码不能为空', trigger: 'blur' },
                    { min: 5, max: 20, message: '密码长度在 5 到 20 个字符', trigger: 'blur' }
                ],
                newPw:[
                    { required: true, message: '新密码不能为空', trigger: 'blur' },
                    { min: 5, max: 20, message: '密码长度在 5 到 20 个字符', trigger: 'blur' }
                ],
                repeatPw:[
                    { required: true, message: '重复密码不能为空', trigger: 'blur' },
                    { min: 5, max: 20, message: '密码长度在 5 到 20 个字符', trigger: 'blur' },
                    {validator:validatorRepeatPw,trigger: 'blur'}
                ]
            },
            toSubmit:()=>{
                this.$refs.pwEditorForm.validate((valid) => {
                    if (valid) {
                        this.pwEditor.submit();
                    } else {
                        return false;
                    }
                });
            },
            submit:()=>{
                var params=new URLSearchParams();
                for(let key in this.pwEditor.form)params.append(key,this.pwEditor.form[key]);
                this.$http.post(this.$store.state.url+"/admin/changepw",params).then(res=>{
                    if(res.data.status==200){
                        this.$message({message: '密码修改成功',type: 'success'});
                        this.pwEditor.show=false;
                    }else{
                        this.$message({message: res.data.message,type: 'error'});
                    }
                }).catch();
            }
        }
    }
  },
  methods:{
    menuInit:function(){
      var url=window.location.toString().replace(window.location.origin+'/#','') ;
      if(url=="")url="/index";
      this.activeIndex=url.toLowerCase();
    },
    hiddenMenu:function(){
        this.menuShow=!this.menuShow;
    },
    loginOut(){
        this.$http.post(this.$store.state.url+"/admin/logout").then(
            response=>{
                if(response.data.status==200){}
            }
        ).catch();
        window.sessionStorage.removeItem("menuList");
        window.sessionStorage.removeItem("admin");
        this.$router.push("/login");
    },
    toChangePw(){
        this.pwEditor.form={
            originPw:"",
            newPw:"",
            repeatPw:""
        }
        this.pwEditor.show=true;
    },
    getCommand(val){
        if(val=="a"){
            this.toChangePw();
        }else if(val=="b"){
            this.loginOut();
        }
    }
  },
  created:function(){
    if(window.sessionStorage.getItem("menuList")==null){
        window.location="/#/login";
    }else{
        this.menuList=JSON.parse(window.sessionStorage.getItem("menuList"));
        this.admin=JSON.parse(window.sessionStorage.getItem("admin"));
    }
    this.menuInit();
    
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
